<template>
	<view class="mainbgc" v-if="pageshow">
		<view class="center">
			<view class="flexbetween flex_wrap header">
				<view class="flexstart">
					<view class="image_ya">
						<image :src="dataAll.user.avatar_text" mode=""></image>
					</view>
					<view class="center_zi">
						<!-- 新增设置昵称 -->
						<!-- <view class="word_hei">{{dataAll.user.real_name}}</view> -->
						<view class="word_hei">{{dataAll.user.nickname}}</view>
						<view class="hui">{{dataAll.createtime_text}}</view>
					</view>
				</view>
				<view class="flexleft margin_top">
					<view class="province_jiangsu">{{dataAll.cityinfo}}</view>
				</view>
			</view>
			<view class="mainpadding margin_top">
				<view class="flexbetween">
					<view class="text_weight">商品分类</view>
					<view class="text_grey">{{dataAll.category_text}}</view>
				</view>
			</view>
			<view class="mainpadding margin_top">
				<view class="flexbetween">
					<view class="text_weight">{{dataAll.type==1?"供应":"求购"}}标题</view>
					<view class="text_grey">{{dataAll.title}}</view>
				</view>
			</view>
			<view class="mainpadding margin_top">
				<view class="flexbetween">
					<view class="text_weight">发布时间</view>
					<view class="text_grey">{{dataAll.createtime_text}}</view>
				</view>
			</view>
			<view class="mainpadding margin_top">
				<view class="flexbetween">
					<view class="text_weight">{{dataAll.type==1?"供应":"求购"}}数量</view>
					<view class="text_grey">{{dataAll.num}}{{dataAll.unit}}</view>
				</view>
			</view>
			<view class="mainpadding margin_top">
				<view class="flexbetween">
					<view class="text_weight">价格</view>
					<view class="text_grey">{{dataAll.price_des}}</view>
				</view>
			</view>
			<view class="mainpadding margin_top">
				<view class="flexbetween">
					<view class="text_weight">详情描述</view>
				</view>
				<view class="margin_top">
					<view class="text_grey">{{dataAll.des}}</view>
				</view>
			</view>
			<view class="mainpadding margin_top" v-if="dataAll.video_url_text">
				<video :src="dataAll.video_url_text" class="videoclass"></video>
			</view>
			<view class="margin_top min">
				<!-- 图片 -->
				<!-- 图片 -->
				<view class="flexleft margin_top flex_wrap">
					<view class="item_image_box flexcenter" v-for="(item,index) in dataAll.images_text" :key="item">
						<view class="item_image ">
							<image :src="item" mode="" @click="previewimg(index,dataAll.images_text)"></image>
						</view>
					</view>
				</view>
				<view class="mainpadding margin_top">
					<view class="flexbetween">
						<view class="text_weight" v-if="type==1">发货地</view>
						<view class="text_weight" v-else>收货地</view>
					</view>
					<view class="margin_top">
						<view class="text_grey">{{dataAll.cityinfo}}{{dataAll.address}}</view>
					</view>
				</view>
				<view class="mainpadding margin_top">
					<view class="text_weight">公司名称：{{dataAll.user.shop_apply.shop_name}}</view>
					<view class="flexleft header_three margin_top">
						<view class="header_VIP" v-if="dataAll.user.vip_status">VIP认证</view>
						<view class="header_gs" v-if="dataAll.user.qy_status==1">企业认证</view>
						<view class="header_gs" v-if="dataAll.user.qy_status==2">工商认证</view>
						<view class="header_pt" v-if="dataAll.user.platform_status==1">平台认证</view>
					</view>
					<view class="flexleft margin_top">
						<view class="text_grey margin_right">
							联系人：{{dataAll.user.shop_apply?dataAll.user.shop_apply.shoplx[0].name[0]+"**":dataAll.user.real_name[0]+"**"}}
						</view>
						<view class="text_grey">联系电话：{{teljiami(dataAll)}}</view>
					</view>
				</view>
				<view class="flexbetween bottom">
					<view class="hui">浏览：{{dataAll.views}}次</view>
					<view class="hui">分享：{{dataAll.share_num}}次</view>
					<view class="hui">收藏：{{dataAll.collect_num}}次</view>
					<view class="hui">拨打：{{dataAll.call_num}}次</view>
				</view>

				<view class="matter">
					<view class="">{{fxts.gx_des}}</view>
					<!-- <view class="one">1.近期，有消费者反映，某些保险销售人员为提高销售业绩，在保险产</view>
					<view class="two">2.品销售过程中，向消费者提供与实际不符或让人误解的信息，诱导消</view>
					<view>3.费者购买保险产品，存在套路营销、诱导消费、强制搭售等问题，侵害了消费者合法权益。为此，中国银保监会消费者权益保护局发布</view> -->
				</view>
			</view>
		</view>
		<!-- footer -->
		<view class="footer flexbetween">
			<view class="flexleft">
				<view class="" @click="shareadd">
					<button open-type="share" class="footer_stars">
						<view class="share"></view>
						<view class=" share_zi">分享</view>
					</button>
				</view>
				<view class="footer_star" @click="collect">
					<!-- 已收藏 图片-->
					<view class="collect_star flexcolumn" v-show="dataAll.is_collect"></view>
					<view class="star flexcolumn " v-show="!dataAll.is_collect"></view>
					<view class="collect">收藏</view>
				</view>
			</view>
			<view class="flexleft footer_right" @click="phone(dataAll)">
				<view class="phones">拨打电话</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				fxts: {},
				is_login: true,
				pageshow: false,
				type: ""
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.init()
			this.getfx()
		},
		onShow() {
			let _this = this
			if (!httpRequest.checkIsLogin()) {
				_this.is_login = false
			}
		},
		methods: {
			teljiami(dataAll) {
				let tel = dataAll.user.shop_apply ? dataAll.user.shop_apply.shoplx[0].mobile : dataAll.user.mobile
				let result = tel.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
				return result
			},
			previewimg(index, arr) {
				let i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getfx() {
				httpRequest.request('/api/index/getConfigInfo', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.fxts = res.data
					}
				})
			},
			init() {
				httpRequest.request('/api/gx/detail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.pageshow = true
						this.type = res.data.type
						if (res.data.type == 1) {
							uni.setNavigationBarTitle({
								title: "供应详情"
							})
						} else {
							uni.setNavigationBarTitle({
								title: "需求详情"
							})
						}
						this.dataAll = res.data
					}
				})
			},
			shareadd() {
				httpRequest.request('/api/gx/addCcShareNum', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {})
			},
			onShareAppMessage() {
				return {
					title: this.dataAll.title,
					path: "pages/supply/gongyingxq?id=" + this.listid + "&invite_code=" + uni.getStorageSync(
						"invite_code"),
				}
			},

			collect() {
				httpRequest.request('/api/gx/addCcCollect', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			phone(dataAll) {
				let p = dataAll.user.shop_apply ? dataAll.user.shop_apply.shoplx[0].mobile : dataAll.user.mobile
				this.addboda()
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {

				})
			},
			addboda() {
				httpRequest.request('/api/gx/addGxCallNum', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.header_VIP {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFA500;
		padding: 4rpx 16rpx 4rpx 16rpx;
		background: RGBA(255, 246, 230, 1);
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		margin-right: 30rpx;
	}

	.header_gs {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 4rpx 16rpx 4rpx 16rpx;
		background: RGBA(233, 244, 255, 1);
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		margin-right: 30rpx;
	}

	.header_pt {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FD463E;
		padding: 4rpx 16rpx 4rpx 16rpx;
		background: RGBA(255, 237, 236, 1);
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		margin-right: 30rpx;
	}

	.videoclass {
		width: 100%;
		height: 400rpx;
		border-radius: 20rpx;
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.item_image {
		width: 144rpx;
		height: 144rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.center {
		padding: 30rpx 0rpx;
		padding-bottom: 200rpx;
	}

	.bottom {
		padding-top: 34rpx;
	}

	.header {
		padding: 30rpx 30rpx;
		background-color: #fff;
	}

	.image_ya {
		margin-right: 15rpx;
	}

	.mainpadding {
		background-color: #fff;
	}

	.vip {
		margin-left: 20rpx;
	}

	.matter {
		padding-top: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.min {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.footer_star {
		padding-left: 66rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.one {
		//超出一行省略号
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.two {
		//超出一行省略号
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.footer {
		width: 90%;
		position: fixed;
		bottom: 0rpx;
		background-color: #fff;
		padding: 30rpx 46rpx;
		padding-bottom: 57rpx;
	}

	.phones {
		background: #228DFF;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		padding: 21rpx 42rpx 21rpx 43rpx;
	}

	.collect {
		margin-top: 13rpx;
	}

	.share_zi {
		margin-top: 13rpx;
	}

	.time {
		padding-top: 13rpx;
	}

	.item_image_box {
		width: 25%;
	}
</style>